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Немного о себе... 


Зар Захаров 


В разработке с 2006 года 


Работал в стартапах, крупных энтер- 
прайз проектах, фрилансах и 
аутсорсах 


Являюсь ментором наставником 
преподователем 


Создатель первого марафона по 
программированию 


Создатель образовательной 
платформы UpgradeHub 


Работаю в VK 


О чем будем говорить... 


Чуть-чуть истории, чтобы поймать контекст 

Что такое МЕЕ -> MicroFrontEnd -> Микрофронты 
Какие есть подходы 

Какие есть проблемки 

Реальные кейсы 

И... 


Вопросы (: 


Поговорим о приложениях... 
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Какие плюсы? 


о Его легче реализовать 
о Сквозные (Е2Е) тесты 
о Прост в развертывании и легко масштабируется 


о Единый framework 


Какие недостатки? 


о Часто перерождаются в «большой шарик грязи» 
о Компоненты растут вместе, их также необходимо менять вместе 
о Масштабирование может быть проблематичным 


о В монолите практически нет изоляции 
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Микросервис 
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Edge Side Includes 
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Edge Side Includes 
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Что это? 


“Идея, которая лежит в основе 
микрофронтенда, заключается 
в том, чтобы думать о веб-сайте 
или веб-приложении как 
о совокупности функций, 
которые принадлежат 
независимым командам.” 


Michael Geers 


Какие задачи решает? 


(11) YouTube 
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Петя Первый запас... 


Web Dev Simplified 
сФилином 
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Egor Malkevich 
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Показать ещё 133 к... 


Все Сейчас в эфире Музыка 
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ЕЗ "Это не моя страна" | В офисе 
Егор Бугаенко 


В офисе 
20 тыс. просмотров * 8 дней назад 
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Расслабляющая музыка, 
исцеляющая от стресса... 


Love YourSelf @ 
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Туристические направления 


Джемы Природа 


1:09:48 


Back To Тһе 805 - Retro Wave | А 
“= Synthwave/ Chillwave/ Retrowav... 


No.1 
34 тыс. просмотров * 3 недели назад 


ФУНДАМЕНТАЛЬНЫЙ 
рер 


OT AOA 


2021 


p 5o 


(г a Vue 3 фундаментальный курс от 
EN А no Я 
Ulbi TV 


274 тыс. просмотров * 
10 месяцев назад 


Анимация 
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HC Скандал Джонни Деппа и Эмбер 
Херд - актриса попалась на лжи! 
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1,3 млн просмотров “ 8 дней назад 
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Какие подходы есть 


Podium 4.2.1 Overview Podlets Layouts API Help Blog 


Podium 


Easy server side composition of microfrontends 


GET STARTED f GITHUB 
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Webpack 5 

: A game- - 
changer in JavaScript or 
architecture © - 


In this article we will learn about Webpack 5 Module Federation: A 
game-changer in JavaScript architecture 


Webpack JavaScript 
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Podium 


Easy server side composition of microfrontends 


Podium - это фреймворк для 
создания микрофронтенда на 
стороне сервера 


Он реализован Ha Javascript и 
работает на Node.js 


Вошел в HapiJS 
Подходит для FullStack 


express require( 'express'); 
Layout require( '@podium/layout'); 


app = express(); 
layout Layout({ 


name: 'myLayout', 
pathname: '/demo', 


podlet layout.client.register({ 
name: 'myPodlet', 
uri: *http://localhost:7100/manifest.json', 


.use( Layout.middleware( )); 
.get('/demo', (req, res) { 
incoming res. locals.podium; 


response podlet.fetch(incoming); 


incoming.view.title "Му Super Page'; 


res.podiumSend( <div>${response}</div> ); 
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Single-SPA 


A javascript router for front-end microservices 


е Это фреимворк, который объединяет 
несколько Јамазспр!-микрофронтендов B 
одно фронтенд-приложение. 


е Использование нескольких 
фреймворков на одной странице (React, 
AngularJS, Angular, Ember или что-то ещё) 


• Разворачивание ваших микрофронтендов 
независимо друг от друга 


е Можно писать код, используя новый 
фреймворк, без переписывания 
существующего приложения 


е Ленивая загрузка кода для улучшения 
времени начальной загрузки 
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) => umport( ), 
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| ) => location.pathname.startsWith( 
{ some: } 
); 
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app: () => import( 
activeWhen: 
customProps: 1 
some: 


|); 


Но есть проблемка... 
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Webpack 5 Моси е 
Federation: А game- 
changer in JavaScript 
architecture 


In this article we will learn about Webpack 5 Module Federation: A 
game-changer in JavaScript architecture 


Webpack ИН JavaScript 


Module Federation 


Webpack Module Federation 


о Плагин Module Federation позволяет приложению 
экспортировать один или несколько модулей в отдельный JS 
файл; 

о Отличньй способ строить микрофронтенд приложения; 


о Сторонние приложения могут импортировать себе готовые 
модули, это могут быть например React компоненты; 


о Импорт зависимостей Webpack берет на себя; 
о Отличие от NPM в том, что импорт в runtime. 
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HomePage webpack.config.]s 


const HtmlWebpackPlugin = require( 
const ModuleFederationPlugin = require( 


module.exports = 1 


plugins: [ 
new ModuleFederationPlugin({ 
name: е", 
librarv: + Туре: 
filename: 
exposes: + 
ProductCarousel: 
), 
Shared: | 
+), 
| 
}; 


ShopPage index.html 


<html lang="en"> 
<head> 
«script src="http://localhost:3003/remoteEntry.js"></script> 


<script src="http://localhost:3001/remoteEntry.js"></script> 
</head> 
<body> 
<div id="root"></dtv> 
</body> 
</html> 


ShopPage webpack.config.js 


const HtmlWebpackPlugin = ('html-webpack-pLugtn' ); 
const ModuleFederationPlugin = ('webpack/lib/container/ModuleFederationPlugin'); 


React App ShopPage 


import React from ‘react’; 
import ProductCarousel from 'home/ProductCarousel'; 


function App() { 
return ( 
< 
ји 
} 


export default 


В заключение... 
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Микрофронтенды имеют смысл, если: 


е У вас большое приложение. 
е Несколько команд разработки. 


е Вы все чаще сталкиваетесь с проблемами при выкате 
обновлений приложения. 


* Преимущества монолита обернулись в минусы. 


е Вам надо сделать плавный переезд с одной технологии на 
другую. 


Ну, ана этом все... 
С вами был, Зар Захаров 
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Let's keep іп touch! 
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Выбираите 
технологию с умом... 
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